<template>
    <!-- 欢迎页面的根元素 -->
    <div class="welcome">
        <!-- 使用Element UI的卡片组件作为页面的背景容器 -->
        <el-card class="background_box">
            <!-- 引入BookMark组件，用于展示登录界面的标题、副标题、图片和按钮 -->
            <!-- ref属性用于给组件注册引用信息 -->
            <!-- :title_1等属性用于向子组件传递数据 -->
            <!-- @change和@anotherChange事件用于在BookMark组件触发时调用Welcome组件中定义的方法 -->
            <BookMark ref="login" 
                :title_1="leftTitle.title_1" 
                :title_2_1="leftTitle.title_2_1" 
                :title_2_2="leftTitle.title_2_2" 
                :cover="leftTitle.cover"
                :buttonTitle="leftTitle.buttonTitle" 
                :newButtonTitle="rightTitle.buttonTitle" 
                @change="toLogin" 
                @anotherChange="toRegister">
            </BookMark>
            <!-- 引入BookMark组件，用于展示注册界面的标题、副标题、图片和按钮 -->
            <!-- 这里只监听change事件，因为注册界面不需要触发toLogin方法 -->
            <BookMark ref="register" 
                :title_1="rightTitle.title_1" 
                :title_2="rightTitle.title_2"
                :title_2_1="rightTitle.title_2_1" 
                :title_2_2="rightTitle.title_2_2" 
                :cover="rightTitle.cover"
                :buttonTitle="rightTitle.buttonTitle" 
                @change="toRegister">
            </BookMark>
            <!-- 引入Login组件，用于登录表单 -->
            <Login ref="loginRef"></Login>
            <!-- 引入Register组件，用于注册表单 -->
            <!-- @toLogin事件用于在用户注册后触发登录界面的显示 -->
            <Register ref="registerRef" @toLogin="toLogin"></Register>
        </el-card>
    </div>
</template>

<script>
    // 导入其他Vue组件
    import BookMark from './bookmark'
    import Login from './login'
    import Register from './register'

    export default {
        name: 'Welcome', // 定义组件的名称为Welcome
        components: { // 声明组件中使用的子组件
            BookMark,
            Login,
            Register
        },
        data() {
            return {
                // 定义组件的data函数，返回一个对象包含登录和注册界面的标题、图片和按钮文本
                leftTitle: {
                    title_1: '欢迎光临',   
                    title_2_1: '小新',
                    title_2_2: '零食商城',
                    cover: require('./images/logo.png'), // 导入登录界面的图片
                    buttonTitle: '点击登录',
                    newButtonTitle:'点击注册',
                },
                rightTitle: {
                    title_1: '我们诚挚欢迎',
                    title_2_1: '您的到来',
                    title_2_2: '感谢您的支持',
                    cover: require('./images/zhuce.jpeg'), // 导入注册界面的图片
                    buttonTitle: '点击注册'
                },
            }
        },
        methods: {
            // 定义组件的方法
            toLogin() {
                // 切换到登录界面的方法
                // 显示Login组件，隐藏Register组件
                this.$refs.loginRef.show = true
                this.$refs.registerRef.show = false
                // 使用setTimeout来实现动画效果的延迟
                setTimeout(() => {
                    // 为Login和Register组件添加动画样式
                    this.$refs.loginRef.moveStyle = {
                        transform: ' translateY(30px)'
                    }
                    this.$refs.registerRef.moveStyle = {
                        transform: ' translateY(30px)'
                    }
                }, 10)
            },
            toRegister() {
                // 切换到注册界面的方法
                // 隐藏Login组件，显示Register组件
                this.$refs.loginRef.show = false
                this.$refs.registerRef.show = true
                // 使用setTimeout来实现动画效果的延迟
                setTimeout(() => {
                    // 为Login和Register组件添加动画样式
                    this.$refs.loginRef.moveStyle = {
                        transform: 'translateX(300px) translateY(30px)'
                    }
                    this.$refs.registerRef.moveStyle = {
                        transform: 'translateX(300px) translateY(30px)'
                    }
                }, 10)
            },
        }
    }
</script>

<style scoped>
    .welcome {
        height: 100%;
        background: url(./images/1.webp);
    }

    .background_box {
        
        width: 68%;
        height: 80%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: visible;
    }
</style>